<!--添加系统变量 -->
<template>
  <el-dialog
    title="提示"
    v-model="dialogVisible"
    style="width: 40%; height: 100%; float: right; margin: 0"
    :close-on-click-modal="false"
    :showClose="false"
    :before-close="Cancel"
  >
    <!-- 头部 -->
    <template #title>
      <!-- 这里添加您希望在左上角放置的内容，例如关闭按钮 -->
      <span>
        <i class="el-icon-close" @click="dialogVisible = false" style="cursor: pointer"></i>
      </span>
      <span> 添加系统变量 </span>
    </template>
    <el-form label-position="top">
      <!-- 上面两行input -->
      <div style="display: flex">
        <!-- 设备选择 -->
        <el-form-item label="设备选择" style="display: inline-block; flex: 1">
          <el-select
            v-model="SelectDevice"
            placeholder="请选择"
            style="width: 100%"
            @change="DeviceChange"
          >
            <el-option
              v-for="item in AxiosOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="选择变量">
        <el-col v-for="(item, index) in SystemVariable" :key="index">
          <div
            v-if="item.type == 'read' || item.type == 'both'"
            style="display: flex; justify-content: center; align-items: center; margin: 10px"
          >
            <!-- 执行条件的文字显示 -->
            <span style="flex: 1; text-align: center">{{ item.propertyName || deviceName }}</span>
            <span style="flex: 1; text-align: center">操作</span>
            <span style="flex: 2; text-align: center">
              <el-select
                v-if="item.renderModel === 'select'"
                v-model="item.checkValue"
                class="m-2"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in AutoRendermod1[item.rendermod2]"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </span>
            <span style="flex: 2; text-align: center; margin-left: 5%">
              <el-input v-model="item.statusValue"></el-input>
            </span>
            <span style="flex: 1; text-align: center">
              <el-link @click="DeleteFilled(index, 1)" :underline="false" style="margin-left: 5%"
                ><el-icon><DeleteFilled /></el-icon
              ></el-link>
            </span>
          </div>
        </el-col>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="showDelete" type="danger" @click="DeleteConditions">删除</el-button>
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
        <!-- <el-button @click="loginaa">显示设备</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>
  
  <script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import AutoRendermod1JSON from '../../../MyJson/AutoRendermod1.json'
import { ElMessage } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'

export default {
  setup(_, { emit }) {
    // 导入 自动化模板2
    const AutoRendermod1 = ref(AutoRendermod1JSON.template)
    // dialog的关闭显示
    const dialogVisible = ref(false)
    //  select  选择设备的值
    const SelectDevice = ref('')
    // vuex导入
    const store = useStore()
    // 系统变量数组
    const AxiosOptions = ref(null)
    // vuex 设备类型
    const deviceTypeStr = ref(store.state.deviceTypeStr)
    // 系统变量 select 选中的值
    const SystemVariable = ref([])
    // da
    const deviceName = ref(null)
    const id = ref(null)
    const showDelete = ref(false)
    //
    //
    //
    //
    //
    //
    //
    const loginaa = () => {}
    //
    // 选中设备的值
    const DeviceChange = (event) => {
      id.value = event
      const res = AxiosOptions.value.filter((item) => item.id === event)
      if (res) {
        deviceName.value = res[0].name
        SystemVariable.value = JSON.parse(JSON.stringify(res[0].values))
      }
    }
    // 删除
    const DeleteFilled = (index) => {
      SystemVariable.value.splice(index, 1)
    }
    // 确定后输出表单
    const submit = () => {
      const uuid = uuidv4()
      const result = []

      SystemVariable.value.forEach((item) => {
        let res = {
          id: uuid,
          conditionType: 'AUTO_SCHED_CONDITION_TYPE_DEVICE',
          deviceId: id.value,
          statusName: item.statusName,
          checkValue: item.checkValue,
          statusValue: item.statusValue,
          deviceName: deviceName.value,
          rendermod1: item.rendermod1,
          rendermod2: item.rendermod2,
          name: item.statusName,
          renderModel: item.renderModel,
          type: item.type,
          Change: 'Variable',
          propertyName: item.propertyName
        }
        result.push(res)
      })

      emit('conditions', result)
      Cancel()
    }
    // 取消
    const Cancel = () => {
      SelectDevice.value = ''
      SystemVariable.value = []
      dialogVisible.value = false
    }

    const openmyDialog = () => {
      dialogVisible.value = true

      const listDvcAndDvcVer = window.api.listDvcAndDvcVer()

      const MyfilterList = JSON.parse(listDvcAndDvcVer)

      const result = MyfilterList.filter((item) => {
        return item.isVirtual === 'IS_VARIABLE' && item.DevicetypeValue === 1002
      })

      AxiosOptions.value = result
    }
    // 删除
    const DeleteConditions = () => {
      emit('DeleteConditions')
      Cancel()
    }
    return {
      showDelete,
      AutoRendermod1,
      deviceTypeStr,
      SystemVariable,
      dialogVisible,
      SelectDevice,
      AxiosOptions,
      deviceName,
      id,
      openmyDialog,
      submit,
      DeviceChange,
      DeleteFilled,
      Cancel,
      loginaa,
      DeleteConditions
    }
  }
}
</script>
  
  <style lang="less" scoped>
.myCascader {
  display: flex;
}
</style>
  